<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">流程管理</div>
          <div class="tablelink">
            <el-link icon="el-icon-plus" type="primary" @click="_add()" :underline="false">新增流程</el-link>
          </div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="流程名称">
            <el-input v-model="dataForm.flowName" placeholder="请输入流程名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" class="marginLeft"
                       @click="getDataList(1)">检索
            </el-button>
          </el-form-item>
        </el-form>
        <div class="avue-crud">
          <el-table :data="dataList" v-loading="dataListLoading" stripe>
            <el-table-column label="序号" header-align="center" align="center" :formatter="nShowIndex" width="80"></el-table-column>
            <el-table-column prop="flowName" label="名称" header-align="center" min-width="120">
            </el-table-column>
            <el-table-column prop="flowEdition" label="最新版本" header-align="center" align="center" width="220">
            </el-table-column>
            <el-table-column prop="flowState" label="状态" header-align="center" align="center" width="80">
              <template slot-scope="scope">
                {{ scope.row.flowState == "1" ? "有效" : "无效" }}
              </template>
            </el-table-column>
            <el-table-column prop="modifyTime" :formatter="formater" label="更新时间" header-align="center" align="center"
                             width="150">
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="550">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="_basic(scope.row)" :disabled="scope.row.flowState == '0'">
                  基础信息
                </el-button>
                <el-button type="primary" plain @click="_flow(scope.row)" :disabled="scope.row.flowState == '0'">
                  流程管理
                </el-button>
                <el-button type="danger" plain @click="_release(scope.row)" :disabled="scope.row.flowState == '0'">
                  发布流程
                </el-button>
                <el-button type="danger" plain @click="_editState0(scope.row)" :disabled="scope.row.flowState == '0'">
                  作废流程
                </el-button>
                <el-button type="success" plain @click="_editState1(scope.row)" :disabled="scope.row.flowState == '1'">
                  恢复流程
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                         :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <el-dialog title="流程名称" :visible.sync="isNewVisiable" width="650px" :close-on-click-modal="false">
        <el-form ref="newForm" label-width="100px" label-position="right">
          <el-form-item label="流程名称:" prop="newName">
            <el-input placeholder="流程名称" v-model="newName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="_addSave()">保存</el-button>
          <el-button type="primary" plain @click="isNewVisiable=false">取消</el-button>
        </span>
      </el-dialog>
      <basic ref="basic" v-on:loadData="getDataList"></basic>
      <flow ref="flow" v-on:loadData="getDataList"></flow>
      <release ref="release" v-on:loadData="getDataList"></release>
    </basic-container>
  </div>
</template>

<script>
import {Message} from "element-ui";
import {fetchList, addObj, putObj} from '@/api/workflow/wfflowconfig'
import basic from "./basic";
import flow from "./flow";
import release from "./release";

export default {
  data() {
    return {
      isNewVisiable: false,
      newName: "",
      dataForm: {
        flowName: "",
        flowState: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
    }
  },
  components: {
    basic,
    flow,
    release
  },
  created() {
    this.getDataList()
  },
  computed: {},
  methods: {
    formater(row, column, cellValue, index) {
      if (cellValue) {
        return this.$moment(cellValue).format("yyyy-MM-DD HH:mm");
      } else {
        return cellValue;
      }
    },
    // 获取数据列表
    getDataList(page) {
      if (page) {
        this.pageIndex = page
      }
      this.dataListLoading = true
      fetchList(Object.assign({
        page: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    //添加
    _add() {
      this.isNewVisiable = true;
    },
    //添加保存
    _addSave() {
      if (this.newName == "") {
        Message({
          message: "请输入正确的流程名称...",
          type: "error",
          duration: 3 * 1000
        });
        return;
      } else {
        let info = {
          flowName: this.newName,
          flowState: "1",
          switchRollback: "关",
          switchMark: "关",
          flowOrder: 99
        };
        addObj(info).then(res => {
          if (res.data.code == "0") {
            this.isNewVisiable = false;
            this.newName = "";
            Message({
              message: "流程建立成功...",
              type: "success",
              duration: 3 * 1000
            });
            this.getDataList();
          } else {
            Message({
              message: res.msg,
              type: "error",
              duration: 3 * 1000
            });
          }
        })
      }
    },
    //基本信息
    _basic(r) {
      this.$refs.basic.init(r.id);
    },
    //流程管理
    _flow(r) {
      this.$refs.flow.init(r.id);
    },
    //发布管理
    _release(r) {
      this.$refs.release.init(r.id);
    },
    //作废流程
    _editState0(r) {
      this.$confirm("此操作将作废该流程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let info = {
            id: r.id,
            flowState: "0"
          };
          putObj(info).then(res => {
            if (res.data.code == "0") {
              this.isNewVisiable = false;
              this.newName = "";
              Message({
                message: "流程作废成功...",
                type: "success",
                duration: 3 * 1000
              });
              this.getDataList();
            } else {
              Message({
                message: res.msg,
                type: "error",
                duration: 3 * 1000
              });
            }
          })
        })
    },
    //恢复流程
    _editState1(r) {
      this.$confirm("此操作将作废该流程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let info = {
            id: r.id,
            flowState: "1"
          };
          putObj(info).then(res => {
            if (res.data.code == "0") {
              this.isNewVisiable = false;
              this.newName = "";
              Message({
                message: "流程恢复成功...",
                type: "success",
                duration: 3 * 1000
              });
              this.getDataList();
            } else {
              Message({
                message: res.msg,
                type: "error",
                duration: 3 * 1000
              });
            }
          })
        })
    }
  }
}

</script>
